<script setup lang="ts">

const props = defineProps<{
  mate: any
  form: any
  change: Function
}>()
</script>

<template>
  <el-input
    v-if="mate.type == 'text'"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    clearable
    :placeholder="mate.placeholder"
    v-model="props.form![mate.property]"
    @change="change"
  />
  <el-input
    v-if="mate.type == 'textarea'"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    type="textarea"
    clearable
    :placeholder="mate.placeholder"
    v-model="props.form![mate.property]"
    @change="change"
  />
  <el-input
    v-if="mate.type == 'password'"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    type="password"
    clearable
    :placeholder="mate.placeholder"
    v-model="props.form![mate.property]"
    @change="change"
  />
  <el-select
    v-else-if="mate.type == 'select'"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    clearable
    :placeholder="mate.placeholder"
    v-model="props.form![mate.property]"
    @change="change"
  >
    <el-option v-for="op in mate.codes" :key="op.itemId" :label="op.itemName" :value="op.itemId" />
  </el-select>
  <el-date-picker
    v-else-if="
      mate.type == 'date' ||
      mate.type == 'datetime'
    "
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    clearable
    :placeholder="mate.placeholder"
    :type="mate.type"
    v-model="props.form![mate.property]"
    @change="change"
  />
  <el-time-picker
    v-else-if="mate.type == 'time' || mate.type == 'timerange'"
    :placeholder="mate.placeholder"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    :type="mate.type"
    v-model="props.form![mate.property]"
    @change="change"
  />

  <el-checkbox-group
    v-else-if="mate.type == 'checkbox'"
    :placeholder="mate.placeholder"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    v-model="props.form![mate.property]"
    @change="change"
  >
    <el-checkbox v-for="cb in mate.codes" :key="cb.itemId" :label="cb.itemName" :name="cb.itemId" />
  </el-checkbox-group>

  <el-radio-group
    v-else-if="mate.type == 'radio'"
    :placeholder="mate.placeholder"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    v-model="props.form![mate.property]"
    @change="change"
  >
    <el-radio v-for="rd in mate.codes" :key="rd.itemId" :label="rd.itemName" :value="rd.itemId" />
  </el-radio-group>

  <el-radio-group
    v-else-if="mate.type == 'radio-button'"
    :placeholder="mate.placeholder"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    v-model="props.form![mate.property]"
    @change="change"
  >
    <el-radio-button v-for="rd in mate.codes" :key="rd.itemId" :label="rd.itemName" :value="rd.itemId" />
  </el-radio-group>

  <el-switch
    v-else-if="mate.type == 'switch'"
    :placeholder="mate.placeholder"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    v-model="props.form![mate.property]"
    @change="change"
  />

  <el-input-number
    v-else-if="mate.type == 'number'"
    :disabled="mate.disabled === undefined ? false : mate.disabled"
    v-model="props.form![mate.property]"
    @change="change"
  />
</template>

<style scoped></style>
